<template>

	<view class="page">
		<view class="header">
			<image @click="back" src="/static/image/login/left.png" mode=""></image>
			<text>创建行程</text>
		</view>
		<scroll-view scroll-y>
			<view class="ctent">
				<view style="height: 176rpx;"></view>
				<view class="topbox">
					<!-- <view class="addbox"> -->
					<view class="titlearea">
						<text style="margin-left: 50rpx;" @click="openscenDialog()" class="normaltxt">深圳</text>
						<text class="splite"></text>
						<text class="middle">3天</text>
						<text class="splite"></text>
						<text class="normaltxt">福州</text>
						<image src="/static/image/publish/edit.png" @click="openEdit" mode=""></image>
					</view>
					<!-- </view> -->
					<view class="daybox" style="display: flex;">
						<scroll-view scroll-x="true" style="width: 78%;display: flex;white-space: nowrap;">
							<view class="itembox">
								
								<view class="item "  v-for="(item, index) in daylist" :key="index" :class="currentDay == index ? 'active' : ''">
									<view class="day" @click="changDay(index)">
										<text class="txt">第{{index + 1}}天</text>
										<text class="bg"></text>
									</view>
									<image @click="delDay(index)" v-if="currentDay != index" src="/static/image/publish/del.png" mode=""></image>
								</view>
								
								<!-- <view class="item">
									<view class="day">
										<text class="txt">第2天</text>
										<text class="bg"></text>
									</view>
									<image src="/static/image/publish/del.png" mode=""></image>
								</view>
								<view class="item">
									<view class="day">
										<text class="txt">第3天</text>
										<text class="bg"></text>
									</view>
									<image src="/static/image/publish/del.png" mode=""></image>
								</view>
								<view class="item">
									<view class="day">
										<text class="txt">第4天</text>
										<text class="bg"></text>
									</view>
									<image src="/static/image/publish/del.png" mode=""></image>
								</view> -->
							</view>
						</scroll-view>
						<view class="addbox" @click="addDay">
							<image src="/static/image/publish/addbg.png" mode=""></image>
							<text>新增</text>
						</view>

					</view>


					<view class="weather">
						<view class="left">
							<text class="one">2025-03-11 晴</text>
							<image src="/static/image/travel/goodday.png" mode=""></image>
							<text class="two">31℃/西北风</text>
						</view>

						<text v-if="isEdit" class="finish" @click="finishedEdit">完成</text>
					</view>

					<div class="mapcontent-box">
						<div class="mapline"></div>
						<view class="mapitem" v-for="(mapItem, mapIndx) in areaList" :key="mapIndx">
							<uni-swipe-action>
								<uni-swipe-action-item :id="mapIndx"  :threshold="50" :autoClose="false" :right-options="options2"  
									@change="change" @click="bindClick">
									<view class="mapitem-header">
										<text class="tips">{{mapIndx + 1}}</text>
										<div class="titlebox">
											<div @click="opentravelDialog" class="one" v-if="!mapItem.clock1">
												<text>添加游玩时间</text>
												<image style="width: 18rpx;height: 18rpx;margin: 0 24rpx 0 12rpx;" src="/static/image/publish/right.png" mode=""></image>
											</div>
											<text class="left" @click="openScence">{{mapItem.title}}</text>
											<image @click="openclockDialog" v-if="mapItem.clock1" src="/static/image/publish/clockactive.png" mode="">
											</image>
										</div>
										<view class="maptips">
											<image v-if="mapItem.clock2" src="/static/image/publish/clocknormal.png" mode="">
											</image>
											<text class="">{{mapItem.time}}</text>
										</view>
									</view>
								</uni-swipe-action-item>
							</uni-swipe-action>
							
							
							<view @click="opentimeDialog" v-if="mapIndx != areaList.length - 1" class="mapitem-body">
								<text>添加出行方式</text>
								<image style="width: 18rpx;height: 18rpx;margin-left: 4rpx;" src="/static/image/publish/right.png" mode=""></image>
							</view>
							<!-- 				<view class="mapitem-body">
									<image src="/static/c1.png" mode=""></image>
									<text>{{mapItem.time}}</text>
								</view> -->
						</view>
					</div>

					<view class="addarea" @click="addAddress">
						<image src="/static/image/publish/add.png" mode=""></image>
						<text>添加地点</text>
					</view>
				</view>

				<view class="bottombox">
					<div class="wrapper">
						<div class="left">
							<text class="normal">智能推荐</text>
							<text class="line"></text>
						</div>
						<text class="right">换一批</text>
					</div>
					

					<div class="showcontentitem" @click="goDetail" v-for="(item, index) in contentList" :key="index">
						<image class="left" :src="item.src" mode=""></image>
						<div class="right">
							<text class="title">
								{{item.title}}
							</text>
							<div class="subtitle">
								<text v-for="(itm) in item.list.slice(0, 3)">{{itm}}</text>
							</div>

							<div class="operatecontent">
								<image v-if="!item.isstar" class="love" src="../../static/image/home/love.png" mode="">
								</image>
								<image v-else class="love" src="../../static/image/home/loveactive.png" mode=""></image>

								<image v-if="!item.iscollect" class="star" src="../../static/image/home/star.png" mode="">
								</image>
								<image v-else class="star" src="../../static/image/home/staractive.png" mode=""></image>

								<image class="fenxiang" src="../../static/image/home/fenxiang.png" mode=""></image>
							</div>
						</div>
					</div>
				</view>
			</view>
		</scroll-view>
		
		
		
		
		
		
		
		
		
		
		
		<!-- <button @click="openDel">删除弹窗</button> -->
		<!-- 删除弹窗 -->
		<!-- borderRadius -->
		<uni-popup ref="delpopup"
		mask-background-color="rgba(0,0,0,0.5)"
		 borderRadius="32rpx 32rpx 32rpx 32rpx"
		 type="center" background-color="#fff" :mask-click="false">
			<div class="delbox">
				<div class="title">
					<text>提示</text>
				</div>
				<div class="desc" >
					<text>确定删除风隐天骄酒店？</text>
				</div>
				<div class="footer">
					<button @click="confirmDel" class="confirm">确定</button>
					<button @click="cancelDel" class="cancel">取消</button>
				</div>
			</div>
		</uni-popup>
		
		
		<!-- <button @click="opentimeDialog">删除出行时间弹窗</button> -->
		<uni-popup ref="timepopup"
		mask-background-color="rgba(0,0,0,0.5)"
		 borderRadius="32rpx 32rpx 32rpx 32rpx"
		 type="bottom" background-color="#fff" :mask-click="false">
			<div class="timebox">
				<div class="title">
					<text>风隐天骄酒店</text>
					<image @click="timeFinished" src="/static/image/travel/close.png" mode=""></image>
				</div>
				<div class="boxaa">
					<picker @change="timePickerChange" :value="timeIndex" :range="timeArr">
						<div class="box">
							<text>{{ timeArr[timeIndex] || '出行方式'}}</text>
							<image style="width: 26rpx;height: 26rpx;" src="/static/image/publish/right.png" mode=""></image>
						</div>
					</picker>
					
					<picker mode="time" :value="timetime" start="09:01" end="21:01" @change="bindTimeChange">
						<div class="box">
							<text>{{timetime || '选择时间'}}</text>
							<image style="width: 36rpx;height: 36rpx;" src="/static/image/publish/timeselect.png" mode=""></image>
						</div>
					</picker>
				</div>
				<div class="desc" >
					<image style="width: 28rpx;height: 28rpx;margin-right: 10rpx;" src="/static/image/publish/add.png" mode=""></image>
					<text>添加出行方式和时间</text>
				</div>
				<div class="footer">
					<button class="confirm" @click="timeFinished">完成</button>
				</div>
			</div>
		</uni-popup>
		
		
		<!-- <button @click="opentravelDialog">删除游玩时间弹窗</button> -->
		<uni-popup ref="travelpopup"
		mask-background-color="rgba(0,0,0,0.5)"
		 borderRadius="32rpx 32rpx 32rpx 32rpx"
		 type="bottom" background-color="#fff" :mask-click="false">
			<div class="time2box">
				<div class="title">
					<text>风隐天骄酒店</text>
					<image @click="travelFinished" src="/static/image/travel/close.png" mode=""></image>
				</div>
				<div class="boxaa">
					<picker mode="time" :value="starTraveltime" start="09:01" end="21:01" @change="bindtravelStartChange">
						<div class="box">
							<text>{{starTraveltime || '开始时间'}}</text>
							<image style="width: 34rpx;height: 34rpx;" src="/static/image/publish/timeselect.png" mode=""></image>
						</div>
					</picker>
					<picker mode="time" :value="endTraveltime" start="09:01" end="21:01" @change="bindtravelEndChange">
						<div class="box">
							<text>{{endTraveltime || '结束时间'}}</text>
							<image style="width: 34rpx;height: 34rpx;" src="/static/image/publish/timeselect.png" mode=""></image>
						</div>
					</picker>
				</div>
				<div class="desc" >
					<!-- <image src="/static/image/publish/add.png" mode=""></image> -->
					<text>游玩合计：30分钟</text>
				</div>
				<div class="footer">
					<button class="confirm" @click="travelFinished">完成</button>
				</div>
			</div>
		</uni-popup>
		
		
		<!-- <button @click="openclockDialog">删除闹钟弹窗</button> -->
		<uni-popup ref="clockpopup"
		mask-background-color="rgba(0,0,0,0.5)"
		 borderRadius="32rpx 32rpx 32rpx 32rpx"
		 type="bottom" background-color="#fff" :mask-click="false">
			<div class="clockbox">
				<div class="title">
					<text>风隐天骄酒店</text>
					<image @click="clockFinished" src="/static/image/travel/close.png" mode=""></image>
				</div>
				<div class="boxaa">
					<div class="box clockxuanzerq">
						<uni-datetime-picker type="date" :border="false" placeholder="选择日期" :clear-icon="false" v-model="clockSeletDate"  />
						<!-- <text>选择日期</text> -->
						<image src="/static/image/publish/dateselect.png" mode=""></image>
					</div>
					<picker mode="time" :value="clockTime" start="09:01" end="21:01" @change="bindClockChange">
						<div class="box">
							<text>{{clockTime || '选择时间'}}</text>
							<image src="/static/image/publish/timeselect.png" mode=""></image>
						</div>
					</picker>
				</div>
		<!-- 		<div class="desc" >
					<image src="/static/image/publish/add.png" mode=""></image>
					<text>游玩合计：30分钟</text>
				</div> -->
				<div class="footer">
					<button class="confirm" @click="clockFinished">完成</button>
				</div>
			</div>
		</uni-popup>
		
		
		<!-- 景点信息弹窗 -->
		<!-- <button @click="openscenDialog">删除景区详情弹窗</button> -->
		<uni-popup ref="scenpopup"
		mask-background-color="rgba(0,0,0,0.5)"
		 borderRadius="32rpx 32rpx 32rpx 32rpx"
		 type="bottom" background-color="#fff" :mask-click="false">
			<div class="scenbox">
				<div class="title">
					<text class="a">风隐天骄酒店</text>
					<text class="b">导航去这里</text>
				</div>
				<div class="subtitle">
					<text class="left">游玩时间</text>
					<text class="right">游玩合计：- -</text>
				</div>
				<div class="box11">

					<picker mode="time" :value="scenStarTime" start="09:01" end="21:01" @change="bindScenstarChange">
						<div class="box">
							<text>{{scenStarTime || '开始时间'}}</text>
							<!-- <image src="/static/image/publish/timeselect.png" mode=""></image> -->
						</div>
					</picker>
<!-- 					
					<div class="box">
						<text>{{clockTime || '开始时间'}}</text>
					</div> -->
					<text class="splite"></text>
					
					<picker mode="time" :value="scenEndTime" start="09:01" end="21:01" @change="bindScenendChange">
						<div class="box">
							<text>{{scenEndTime || '结束时间'}}</text>
							<!-- <image src="/static/image/publish/timeselect.png" mode=""></image> -->
						</div>
					</picker>
			<!-- 		<div class="box">
						<text>{{clockTime || '结束时间'}}</text>
					</div> -->
				</div>
				<div class="subtitle">
					<text class="left">闹钟</text>
					<!-- <text class="right">游玩合计：- -</text> -->
				</div>
				<div class="boxaa">
				
					<!-- clockxuanzerq -->
					<div class="box scenxuanzerq">
						<uni-datetime-picker type="date" :border="false" placeholder="选择日期" :clear-icon="false" v-model="scenSeletDate"  />
						<!-- <text>选择日期</text> -->
						<image src="/static/image/publish/dateselect.png" mode=""></image>
					</div>
					<text class="splite"></text>
					
					<picker mode="time" :value="scenClockTime" start="09:01" end="21:01" @change="bindScenClockChange">
						<div class="box">
							<text>{{scenClockTime || '选择时间'}}</text>
							<image src="/static/image/publish/timeselect.png" mode=""></image>
						</div>
					</picker>
				</div>
				<div class="subtitle">
					<text class="left">备注</text>
					<!-- <text class="right">游玩合计：- -</text> -->
				</div>
				<div class="beizhu" >
					<!-- <image src="/static/image/publish/add.png" mode=""></image> -->
					<!-- <text>游玩合计：30分钟</text> -->
					<input type="text" placeholder="请在此处输入备注信息～" />
				</div>
				<div class="footer">
					<button class="confirm" @click="scenFinished">完成</button>
				</div>
			</div>
		</uni-popup>
		
		
		
		
		
		
		
		
		
		
		
		
		
		<view class="" style="height: 190rpx;">
		</view>
		<tabbar selected="2"></tabbar>
	</view>
</template>

<script>
	import poster from '../../static/image/home/poster.png'
	import tabbar from "../../components/tabbar/tabbar.vue";
	export default {
		components: {
			tabbar: tabbar,
		},
		data() {
			return {

				
				scenClockTime: '',
				scenSeletDate: '',
				scenStarTime: '',
				scenEndTime: '',
		
				starTraveltime: '',
				endTraveltime: '',
				
				timetime: '',
				timeIndex: '',
				timeArr: [
					'汽车',
					'飞机',
					'步行',
					'轮船',
					'火车',
					'骑行',
				],
				
				clockTime: '',
				clockSeletDate: '',
				
				daylist: [0, 1, 2, 3],
				currentDay: 0,
				isEdit: false,
				areaList: [{
						title: '06:00～06:30 风隐天骄酒店',
						time: '无早餐',
						clock1: true
					},
					{
						title: '三巷七坊',
						time: '03-11 10:00',
						clock1: false,
						clock2: true
					},
				],
				contentList: [{
						type: 0,
						src: poster,
						title: '深圳-福州-3日',
						list: [
							'D1：深圳-福州，三巷七坊',
							'D2：福州，平潭岛',
							'D3：福州-深圳，海坛古城'
						],
						isstar: true,
						iscollect: true,
					},
					{
						type: 0,
						src: poster,
						title: '深圳-福州-3日',
						list: [
							'D1：深圳-福州，三巷七坊',
							'D2：福州，平潭岛',
							'D3：福州-深圳，海坛古城'
						],
						isstar: true,
						iscollect: true,
					},
					{
						type: 0,
						src: poster,
						title: '深圳-福州-3日',
						list: [
							'D1：深圳-福州，三巷七坊',
							'D2：福州，平潭岛',
							'D3：福州-深圳，海坛古城'
						],
						isstar: true,
						iscollect: true,
					},
				],
				options2: [{
						text: '编辑',
						style: {
							color: '#1A1A1A',
							backgroundColor: '#CFDAE7'
						}
					},
					{
						text: '删除',
						style: {
							color: '#fff',
							backgroundColor: '#F82400'
						}
					}
				],
				
				// 导航相关
				mapList: [
					{ title: '高德地图', name: 'amap', androidName: 'com.autonavi.minimap', iosName: 'iosamap://' },
					{ title: '百度地图', name: 'baidumap', androidName: 'com.baidu.BaiduMap', iosName: 'baidumap://' },
					{ title: '腾讯地图', name: 'qqmap', androidName: 'com.tencent.map', iosName: 'qqmap://' }
				  ],
				  latitude: '22.5500342',
				  longitude: '114.0672706',
				  name: '深圳市政府',
				  myLocation: {
					latitude: 17.1234,
					longitude: 84.3465686
				  }

			}
		},
		onLoad(options) {
			if (options && options.type == 'clock') {
				setTimeout(() => {
					this.openclockDialog()
				}, 500)
			}
		},
		methods: {
			openURL(map, platform) {
			  let urls = {
				android: {
				  amap: `amapuri://route/plan/?sid=&did=&dlat=${this.latitude}&dlon=${this.longitude}&dname=${this.name}&dev=0&t=0`,
				  qqmap: `qqmap://map/routeplan?type=drive&to=${this.name}&tocoord=${this.latitude},${this.longitude}&referer=ixinyi_client`,
				  baidumap: `baidumap://map/direction?origin=${this.myLocation.latitude},${this.myLocation.longitude}&destination=name:${this.name}|latlng:${this.latitude},${this.longitude}&coord_type=wgs84&mode=driving&src=andr.baidu.openAPIdemo"`
				},
				ios: {
				  amap: `iosamap://path?sourceApplication=ixinyi_client&dlat=${this.latitude}&dlon=${this.longitude}&dname=${this.name}&dev=0&t=0`,
				  qqmap: `qqmap://map/routeplan?type=drive&to=${this.name}&tocoord=${this.latitude},${this.longitude}&referer=ixinyi_client`,
				  baidumap: `baidumap://map/direction?origin=${this.myLocation.latitude},${this.myLocation.longitude}&destination=name:${this.name}|latlng:${this.latitude},${this.longitude}&mode=driving&src=ios.baidu.openAPIdemo`
				}
			  };
			  let newurl = encodeURI(urls[platform][map.name]);
			  console.log(newurl);
			  plus.runtime.openURL(
				newurl,
				function (res) {
				  uni.showModal({
					content: res.message
				  });
				},
				map.androidName ? map.androidName : ''
			  );
			},
			goMap() {
				// #ifdef APP-PLUS
				  // 判断系统安装的地图应用有哪些, 并生成菜单按钮
				  let mapList = [
					{ title: '高德地图', name: 'amap', androidName: 'com.autonavi.minimap', iosName: 'iosamap://' },
					{ title: '百度地图', name: 'baidumap', androidName: 'com.baidu.BaiduMap', iosName: 'baidumap://' },
					{ title: '腾讯地图', name: 'qqmap', androidName: 'com.tencent.map', iosName: 'qqmap://' }
				  ];
				  // 根据真机有的地图软件 生成的 操作菜单
				  let buttons = [];
				  let platform = uni.getSystemInfoSync().platform;
				  platform === 'android' &&
					mapList.forEach(item => {
					  if (plus.runtime.isApplicationExist({ pname: item.androidName })) {
						buttons.push(item);
					  }
					});
				  platform === 'ios' &&
					mapList.forEach(item => {
					  console.log(item.iosName);
					  if (plus.runtime.isApplicationExist({ action: item.iosName })) {
						buttons.push(item);
					  }
					});
				  if (buttons.length) {
					plus.nativeUI.actionSheet(
					  {
						//选择菜单
						title: '选择地图应用',
						cancel: '取消',
						buttons: buttons
					  },
					  e => {
						let _map = buttons[e.index - 1];
						this.openURL(_map, platform);
					  }
					);
				  } else {
					uni.showToast({
					  title: '请安装地图软件',
					  icon: 'none'
					});
					return;
				  }
				  // #endif
			},
			
			
			
			bindScenClockChange: function(e) {
				this.scenClockTime = e.detail.value
			},
			bindScenstarChange: function(e) {
				this.scenStarTime = e.detail.value
			},
			bindScenendChange: function(e) {
				this.scenEndTime = e.detail.value
			},
			
			bindtravelStartChange: function(e) {
				this.starTraveltime = e.detail.value
			},
			bindtravelEndChange: function(e) {
				this.endTraveltime = e.detail.value
			},
			
			bindTimeChange: function(e) {
				this.timetime = e.detail.value
			},
			
			 timePickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.timeIndex = e.detail.value
			},
			
			bindClockChange: function(e) {				this.clockTime = e.detail.value			},
			
			goDetail() {
				uni.navigateTo({
					url: '/pages/scenicdetail/scenicdetail'
				})
			},
			addDay() {
				this.daylist = [...this.daylist, this.daylist.length + 1]
			},
			delDay(index) {
				if(this.daylist.length <= 1) {
					return;
				}
				
				this.daylist.splice(index, 1)
				if(this.daylist.length<=1) {
					this.currentDay = 0
				}
				// if(this.currentDay == index) {
					
				// }
			},
			changDay(index) {
				
				this.currentDay = index
			},
			bindClick({index}) {
				console.log('bindClick',index, )
				if(index == 0) {
					this.openscenDialog()
				} else if(index == 1) {
					this.openDel()
				}
			},
			change(type, e) {
				console.log('change',type, e)
			},
			clockFinished() {
				this.$refs.clockpopup.close()
			},
			 openclockDialog() {
				this.$refs.clockpopup.open()
			},
			travelFinished() {
				this.$refs.travelpopup.close()
			},
			opentravelDialog() {
				this.$refs.travelpopup.open()
			},
			timeFinished() {
				this.$refs.timepopup.close()
			},
			opentimeDialog() {
				this.$refs.timepopup.open()
			},
			openDel() {
				this.$refs.delpopup.open()
			},
			confirmDel() {
				this.$refs.delpopup.close()
			},
			cancelDel() {
				this.$refs.delpopup.close()
			},
			openscenDialog() {
				this.$refs.scenpopup.open()
			},
			scenFinished() {
				this.$refs.scenpopup.close()
			},
			addAddress() {
				uni.navigateTo({
					url: '/pages/searchmap/searchmap'
				})
			},
			openScence() {
				uni.navigateTo({
					url: '/pages/scenicdetail/scenicdetail'
				})
			},
			back() {
				uni.navigateBack()
			},
			openEdit() {
				// this.isEdit = true
				uni.navigateTo({
					url: '/pages/release/release'
				})
			},
			finishedEdit() {
				this.isEdit = false
			},
		}
	}
</script>

<style lang="less">
	.page {
		background: #EEF0F4;
		min-height: 100%;
		display: flex;
		flex-direction: column;

		.header {
			height: 176rpx;
			background-color: #fff;
			// padding-top: 108rpx;
			display: flex;
			justify-content: center;
			// align-items: center;
			position: fixed;
			width: 100%;
			z-index: 1;

			image {
				position: absolute;
				left: 32rpx;
				bottom: 24rpx;
				width: 34rpx;
				height: 34rpx;
			}

			text {
				position: absolute;
				bottom: 16rpx;
				font-weight: 600;
				font-size: 34rpx;
				color: #221715;
				line-height: 51rpx;
			}
		}

		.ctent {
			flex: 1;
			padding: 20rpx;
			box-sizing: border-box;

			.topbox {
				min-height: 400rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
				padding: 40rpx 0 32rpx 0;

				/* .addbox { */
				.titlearea {
					display: flex;
					justify-content: center;
					align-items: center;
					margin-bottom: 60rpx;

					.normaltxt {
						font-weight: bold;
						font-size: 40rpx;
						color: #1A1A1A;
						line-height: 56rpx;
					}

					.splite {
						width: 16rpx;
						height: 2rpx;
						background: #AAAAAA;
						margin: 0 12rpx;
					}

					.middle {
						width: 100rpx;
						height: 44rpx;
						background: #0179FF;
						border-radius: 22rpx;
						font-weight: bold;
						font-size: 28rpx;
						color: #FFFFFF;
						line-height: 40rpx;
						display: flex;
						justify-content: center;
						align-items: center;
					}

					image {
						width: 32rpx;
						height: 32rpx;
						margin-left: 16rpx;
					}
				}

				/* } */
				.daybox {
					padding: 0 32rpx;
					border-bottom: 2rpx solid #F3F5F7;
					box-sizing: border-box;
					margin-bottom: 18rpx;
					display: flex;
					align-items: center;
					padding-bottom: 28rpx;

					.itembox {

						display: flex;
						flex: 1;

						.item {

							margin-right: 50rpx;
							display: flex;
							align-items: center;

							.day {
								min-width: 74rpx;
								display: flex;
								flex-direction: column;

								.txt {
									font-weight: normal;
									font-size: 30rpx;
									color: #1A1A1A;
									line-height: 42rpx;
								}

								.bg {
									opacity: 0;
									width: 76rpx;
									height: 12rpx;
									background: linear-gradient(270deg, #FFFFFF 0%, #017DFF 100%);
								}

							}

							image {
								opacity: 1;
								width: 24rpx;
								height: 24rpx;
								margin-left: 8rpx;
								margin-bottom: 10rpx;
							}
						}

						.active {
							display: flex;

							.day {
								.txt {
									font-weight: bold;
								}

								.bg {
									opacity: 1;
								}
							}

							image {
								opacity: 0;
							}
						}
					}

					.addbox {
						display: flex;
						align-items: center;
						padding-left: 20rpx;
						box-sizing: border-box;

						image {
							width: 32rpx;
							height: 32rpx;
							margin-right: 16rpx;
						}

						text {
							font-weight: 400;
							font-size: 28rpx;
							color: #0179FF;
							line-height: 40rpx;
						}
					}
				}

				.weather {
					display: flex;
					justify-content: space-between;
					margin: 0 20rpx 28rpx;

					.left {
						display: flex;
						align-items: center;

						.one {
							font-size: 28rpx;
							color: #7C7C7C;
							line-height: 40rpx;
						}

						.two {
							font-size: 28rpx;
							color: #7C7C7C;
							line-height: 40rpx;
						}

						image {
							width: 32rpx;
							height: 32rpx;
							margin: 0 12rpx;
						}
					}

					.finish {
						width: 120rpx;
						height: 56rpx;
						background: linear-gradient(270deg, #0187F5 0%, #2DCCC2 100%);
						border-radius: 28rpx;
						font-weight: 400;
						font-size: 28rpx;
						color: #FFFFFF;
						line-height: 40rpx;
						display: flex;
						justify-content: center;
						align-items: center;
					}
				}

				.addarea {
					display: flex;
					align-items: center;
					height: 40rpx;
					margin-left: 52rpx;

					image {
						width: 24rpx;
						height: 24rpx;
						margin: 0 12rpx;
					}

					text {
						font-weight: 400;
						font-size: 28rpx;
						color: #0179FF;
						line-height: 40rpx;
					}
				}
			}

			.bottombox {
				margin-top: 30rpx;
				// width: 710rpx;
				min-height: 638rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
				padding: 30rpx 20rpx;
				box-sizing: border-box;
				
				

				.wrapper {
					display: flex;
					justify-content: space-between;
					margin-bottom: 34rpx;
					.left {
						.normal {
							font-weight: bold;
							font-size: 30rpx;
							color: #221715;
							line-height: 42rpx;
						}
					
						.line {
							width: 120rpx;
							height: 12rpx;
							background: linear-gradient(270deg, #FFFFFF 0%, #017DFF 100%);
						}
					}
					
					.right {
						font-weight: 400;
						font-size: 28rpx;
						color: #0179FF;
						line-height: 40rpx;
					}
				}
				
				.showcontentitem {
					background-color: #fff;
					position: relative;
					display: flex;
					align-items: center;
					margin-bottom: 30rpx;
					// padding-bottom: 30rpx;
					padding: 20rpx;
					border-radius: 16rpx;
					border-bottom: 2rpx solid #F3F5F7;
				
					.left {
						width: 240rpx;
						height: 240rpx;
						margin-right: 20rpx;
						border-radius: 16rpx;
					}
				
					.right {
						flex: 1;
						display: flex;
						flex-direction: column;
				
						.title {
							color: #221715;
							font-size: 28rpx;
							line-height: 40rpx;
						}
				
						.subtitle {
							display: flex;
							flex-direction: column;
							color: #777777;
							font-size: 28rpx;
							line-height: 40rpx;
							margin-top: 20rpx;
						}
				
						.operatecontent {
							position: absolute;
							top: 30rpx;
							right: 20rpx;
							display: flex;
							align-items: center;
				
							.love {
								width: 28rpx;
								height: 26rpx;
								margin-right: 22rpx;
							}
				
							.star {
								width: 28rpx;
								height: 26rpx;
								margin-right: 18rpx;
							}
				
							.fenxiang {
								width: 32rpx;
								height: 26rpx;
							}
						}
					}
				}
			}

		}
	}




	.mapcontent-box {
		position: relative;
		margin: 0 40rpx 20rpx;

		.mapline {
			height: 80%;
			border-left: 2rpx dashed #CED2D9;
			position: absolute;
			top: 20rpx;
			left: 20rpx;
		}

		.mapitem-header {
			background: #F5F7F9;
			border-radius: 16rpx;
			padding: 36rpx 30rpx 20rpx 30rpx;
			min-height: 140rpx;
			background: #F5F7F9;
			border-radius: 16rpx;
			display: flex;
			flex-direction: column;
			position: relative;

			.titlebox {
				display: flex;
				margin-bottom: 22rpx;

				.one {
					display: flex;
					align-items: center;

					text {
						font-weight: 400;
						font-size: 24rpx;
						color: #595959;
						line-height: 32rpx;
					}

					image {
						width: 20rpx;
						height: 20rpx;
						margin-right: 16rpx;
					}
				}

				.left {
					font-weight: 400;
					font-size: 28rpx;
					color: #1A1A1A;
					line-height: 40rpx;
				}

				image {
					width: 36rpx;
					height: 32rpx;
					margin-left: 22rpx;
				}
			}

			.maptips {
				font-weight: 400;
				font-size: 24rpx;
				color: #7C7C7C;
				line-height: 32rpx;
				display: flex;
				align-items: center;

				image {
					width: 28rpx;
					height: 24rpx;
					margin-right: 10rpx;
				}

				text {
					font-weight: 400;
					font-size: 24rpx;
					color: #7C7C7C;
					line-height: 32rpx;
				}
			}

			.clockbox {
				position: absolute;
				top: 28rpx;
				right: 24rpx;
				z-index: 1;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 144rpx;
				height: 56rpx;
				background: linear-gradient(270deg, #0187F5 0%, #2DCCC2 100%);
				border-radius: 28rpx;

				image {
					width: 36rpx;
					height: 36rpx;
					margin-right: 12rpx;
				}

				text {
					font-weight: 400;
					font-size: 28rpx;
					color: #FFFFFF;
					line-height: 40rpx;
				}
			}

			.tips {
				width: 36rpx;
				height: 36rpx;
				background: #DBEBFC;
				border-radius: 16rpx 0rpx 16rpx 0rpx;
				font-weight: bold;
				font-size: 24rpx;
				color: #006FF6;
				line-height: 36rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				position: absolute;
				left: 0rpx;
				top: 0;
			}
		}

		.mapitem-body {
			height: 66rpx;
			display: flex;
			align-items: center;
			margin-left: 44rpx;

			image {
				width: 22rpx;
				height: 22rpx;

			}

			text {
				font-weight: 400;
				font-size: 24rpx;
				color: #888888;
				line-height: 32rpx;
				margin-right: 8rpx;
			}
		}
	}
</style>


<style lang="less">
.delbox {
	width: 630rpx;
	height: 320rpx;
	background: #FFFFFF;
	border-radius: 32rpx;
	padding: 40rpx 40rpx 30rpx 40rpx;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	// justify-content: center;
	flex-direction: column;
	.title {
		margin-bottom: 40rpx;
		text {
			font-weight: bold;
			font-size: 36rpx;
			color: #1A1A1A;
			line-height: 50rpx;
		}
	}
	.desc {
		margin-bottom: 40rpx;
		text {
			font-weight: 400;
			font-size: 28rpx;
			color: #1A1A1A;
			line-height: 40rpx;
		}
	}
	.footer {
		width: 100%;
		// background-color: red;
		display: flex;
		justify-content: space-between;
		
		.confirm {
			width: 230rpx;
			height: 80rpx;
			border-radius: 40rpx;
			border: 2rpx solid #D9D9D9;
			font-weight: bold;
			font-size: 30rpx;
			color: #1A1A1A;
			line-height: 42rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.cancel {
			width: 230rpx;
			height: 80rpx;
			background: #006FF6;
			border-radius: 40rpx;
			font-weight: bold;
			font-size: 30rpx;
			color: #FFFFFF;
			line-height: 40rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
}

.timebox {
	height: 572rpx;
	background: #FFFFFF;
	border-radius: 32rpx 32rpx 0rpx 0rpx;
	padding: 30rpx 40rpx;
	.title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 60rpx;
		text {
			font-weight: bold;
			font-size: 34rpx;
			color: #1A1A1A;
			line-height: 48rpx;
		}
		image {
			width: 45rpx;
			height: 45rpx;
		}
	}
	.boxaa {
		display: flex;
		justify-content: space-between;
		margin-bottom: 32rpx;
		.box {
			width: 320rpx;
			height: 100rpx;
			background: #F5F7F9;
			border-radius: 16rpx;
			padding: 30rpx 20rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
			text {
				font-weight: 400;
				font-size: 28rpx;
				color: #999999;
				line-height: 40rpx;
			}
			image {
				width: 48rpx;
				height: 48rpx
			}
		}
	}
	.desc {
		display: flex;
		align-items: center;
		margin-bottom: 62rpx;
		image {
			width: 48rpx;
			height: 46rpx;
			margin-right: 2rpx;
		}
		text {
			font-size: 28rpx;
			color: #0179FF;
			line-height: 40rpx;
		}
	}
	.footer {
		.confirm {
			height: 88rpx;
			background: #006FF6;
			border-radius: 44rpx;
			font-weight: bold;
			font-size: 30rpx;
			color: #FFFFFF;
			line-height: 42rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
	
}

	.time2box {
		height: 572rpx;
		background: #FFFFFF;
		border-radius: 32rpx 32rpx 0rpx 0rpx;
		padding: 30rpx 40rpx;
		.title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 60rpx;
			text {
				font-weight: bold;
				font-size: 34rpx;
				color: #1A1A1A;
				line-height: 48rpx;
			}
			image {
				width: 45rpx;
				height: 45rpx;
			}
		}
		.boxaa {
			display: flex;
			justify-content: space-between;
			margin-bottom: 32rpx;
			.box {
				width: 320rpx;
				height: 100rpx;
				background: #F5F7F9;
				border-radius: 16rpx;
				padding: 30rpx 20rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: space-between;
				text {
					font-weight: 400;
					font-size: 28rpx;
					color: #999999;
					line-height: 40rpx;
				}
				image {
					width: 48rpx;
					height: 48rpx
				}
			}
		}
		.desc {
			display: flex;
			align-items: center;
			margin-bottom: 62rpx;
			image {
				width: 48rpx;
				height: 46rpx;
				margin-right: 2rpx;
			}
			text {
				font-size: 28rpx;
				color: #0179FF;
				line-height: 40rpx;
			}
		}
		.footer {
			.confirm {
				height: 88rpx;
				background: #006FF6;
				border-radius: 44rpx;
				font-weight: bold;
				font-size: 30rpx;
				color: #FFFFFF;
				line-height: 42rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
	
	.clockbox {
		height: 572rpx;
		background: #FFFFFF;
		border-radius: 32rpx 32rpx 0rpx 0rpx;
		padding: 30rpx 40rpx;
		.title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 60rpx;
			text {
				font-weight: bold;
				font-size: 34rpx;
				color: #1A1A1A;
				line-height: 48rpx;
			}
			image {
				width: 45rpx;
				height: 45rpx;
			}
		}
		.boxaa {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			margin-bottom: 32rpx;
			.box {
				// width: 320rpx;
				margin-bottom: 20rpx;
				height: 100rpx;
				background: #F5F7F9;
				border-radius: 16rpx;
				padding: 30rpx 20rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: space-between;
				text {
					font-weight: 400;
					font-size: 28rpx;
					color: #999999;
					line-height: 40rpx;
				}
				image {
					width: 48rpx;
					height: 48rpx
				}
			}
		}
		.desc {
			display: flex;
			align-items: center;
			margin-bottom: 62rpx;
			image {
				width: 48rpx;
				height: 46rpx;
				margin-right: 2rpx;
			}
			text {
				font-size: 28rpx;
				color: #0179FF;
				line-height: 40rpx;
			}
		}
		.footer {
			.confirm {
				height: 88rpx;
				background: #006FF6;
				border-radius: 44rpx;
				font-weight: bold;
				font-size: 30rpx;
				color: #FFFFFF;
				line-height: 42rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
	
	
	
	
	.scenbox {
		height: 914rpx;
		background: #FFFFFF;
		border-radius: 32rpx 32rpx 0rpx 0rpx;
		padding: 30rpx 40rpx;
		.title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 60rpx;
			.a {
				font-weight: bold;
				font-size: 34rpx;
				color: #1A1A1A;
				line-height: 48rpx;
			}
			.b {
				font-weight: 400;
				font-size: 28rpx;
				color: #0179FF;
				line-height: 40rpx;
			}
		}
		.subtitle {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20rpx;
			.left {
				font-weight: 400;
				font-size: 28rpx;
				color: #1A1A1A;
				line-height: 40rpx;
			}
			.right {
				font-weight: 400;
				font-size: 28rpx;
				color: #595959;
				line-height: 40rpx;
			}
		}
		.box11 {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-bottom: 30rpx;
			height: 100rpx;
			background: #F5F7F9;
			border-radius: 16rpx;
			.box {
				// width: 320rpx;
				height: 100rpx;
				// background: #F5F7F9;
				// border-radius: 16rpx;
				padding: 30rpx 20rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				// justify-content: space-between;
				text {
					font-weight: 400;
					font-size: 28rpx;
					color: #999999;
					line-height: 40rpx;
				}
				// image {
				// 	width: 48rpx;
				// 	height: 48rpx
				// }
			}
			.splite {
				width: 32rpx;
				height: 2rpx;
				background: #AAAAAA;
				margin: 0 104rpx;
			}
		}
		.boxaa {
			display: flex;
			justify-content: space-between;
			margin-bottom: 32rpx;
			.box {
				width: 320rpx;
				margin-bottom: 20rpx;
				height: 100rpx;
				background: #F5F7F9;
				border-radius: 16rpx;
				padding: 30rpx 20rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: space-between;
				text {
					font-weight: 400;
					font-size: 28rpx;
					color: #999999;
					line-height: 40rpx;
				}
				image {
					width: 48rpx;
					height: 48rpx
				}
			}
		}
		.beizhu {
			display: flex;
			align-items: center;
			padding: 0 20rpx;
			height: 100rpx;
			background: #F5F7F9;
			border-radius: 16rpx;
			margin-bottom: 40rpx;
			input {
				font-weight: 400;
				font-size: 28rpx;
				color: #999999;
				line-height: 40rpx;
			}
		}
		.footer {
			.confirm {
				height: 88rpx;
				background: #006FF6;
				border-radius: 44rpx;
				font-weight: bold;
				font-size: 30rpx;
				color: #FFFFFF;
				line-height: 42rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
	
	
	// 闹钟-选择日期
	.clockxuanzerq {
		position: relative;
		// width: 230rpx;
		height: 100rpx;
		display: flex;
	
		justify-content: flex-end;
		position: relative;
		
		  ::v-deep .uni-date-x {			  // display: none;			  background-color: transparent;			  .uni-icons {				  display: none;			  }		  }		  ::v-deep .uni-date-editor {
			  // background-color: red;			  position: absolute;			  top: 0;			  left: 0;			  right: 0;			  bottom: 0;			  z-index: 1;			  display: flex;			  align-items: center;			  display: flex;			  justify-content: flex-start;			  padding-left: 20rpx;		  }
		  
		  ::v-deep .uni-date__x-input {
			  color: #999;
		  }
		  
		  ::v-deep .uni-date-single--x {
			  top: -300rpx!important;
		  }
		  
		  ::v-deep .uni-popper__arrow {
			  display: none!important;
		  }
	}
	
	// 景区-选择日期
	.scenxuanzerq {
		position: relative;
		// width: 230rpx;
		height: 100rpx;
		display: flex;
			
		justify-content: flex-end;
		position: relative;
		
		  ::v-deep .uni-date-x {
			  // display: none;
			  background-color: transparent;
			  .uni-icons {
				  display: none;
			  }
		  }
		  ::v-deep .uni-date-editor {
			  // background-color: red;
			  position: absolute;
			  top: 0;
			  left: 0;
			  right: 0;
			  bottom: 0;
			  z-index: 1;
			  display: flex;
			  align-items: center;
			  display: flex;
			  justify-content: flex-start;
			  padding-left: 20rpx;
		  }
		  
		  ::v-deep .uni-date__x-input {
			  color: #999;
		  }
		  
		  ::v-deep .uni-date-single--x {
			  top: -300rpx!important;
		  }
		  
		  ::v-deep .uni-popper__arrow {
			  display: none!important;
		  }
	}
</style>